<template>
	<view class="content">
		<view class="head">
			<view class="location">
				<u-icon name="map" color="#2E314A" size="16"></u-icon>
				<view class="location-text">
					{{city}}
				</view>
			</view>
			<view class="search">
				<u--input v-model="search" placeholder="搜索关键词" readonly prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #9799AA" shape="circle"
					placeholderStyle="color: #9799AA"></u--input>
				<view class="overlay" @click="$navTo.togo('/pages/index/keyword/index')"></view>
			</view>
		</view>
		<u-popup :show="qsnshow" bgColor="transparent" :safeAreaInsetBottom="false" mode="center" round="14"
			width="400rpx">
			<view class="pop-box">
				<view class="text-1">为呵护未成年健康成长</view>
				<view class="text-2">本APP仅限年满18岁以上用户使用
				</view>
				<view
					style="font-size: 22rpx; color: cornflowerblue; margin-top: 20rpx; display: flex;align-items: center;justify-content: center;"
					@click="$navTo.togo('/pages/my/set/index')">开启青少年保护模式
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="info">
					<view class="btn-box">
						<view @click="closepopup" class="btn">
							我知道了
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="tips">
			<view class="tips-title">
				专业的探店达人
			</view>
			<view class="tips-text">
				带你体验不一样的世界
			</view>
		</view>
		<view class="matching">
			<view class="matching-left">
				<view class="matching-title">
					随机达人探店体验价398币
				</view>
				<view class="gender">
					<view :class="item.show == true?'': 'activity-item'" class="gender-item"
						v-for="(item,index) in genderList" :key="index" @click="cutGender(index)">
						<image :src="item.img" mode=""></image>
						<view>
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
			<view class="start-btn" @click="goonline">
				开始派单
			</view>
		</view>
		<view class="recommend">
			<view class="recommend-title">
				明星排行榜
			</view>
			<scroll-view scroll-x="true" style="width: 100%; overflow: hidden;">
				<view class="item-box">
					<view class="recommend-item" v-if="RecommendList.length > 0" v-for="(item,index) in RecommendList"
						:key="index" @click="$navTo.togo('/pages/index/details/index',{id:item.id})">
						<view class="head-box">
							<image
								:src="item.avatar.startsWith('http') ? item.avatar : 'https://m.lqvvvv.com' + item.avatar || 'https://m.lqvvvv.com/assets/static/index/head.png'"
								mode="aspectFill">
							</image>
							<view class="state" v-if="index == 0" style="color: #fff; background-color: #f7c252;">
								<view class="state-text">
									TOP1
								</view>
							</view>
							<view class="state" v-if="index == 1" style="color: #fff; background-color: #a6bbda;">
								<view class="state-text">
									TOP2
								</view>
							</view>
							<view class="state" v-if="index == 2" style="color: #fff; background-color: #ed977e;">
								<view class="state-text">
									TOP3
								</view>
							</view>
						</view>
						<view class="item-text">
							{{item.nickname}}
						</view>
					</view>
					<view class="none">暂无排行</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view scroll-x="true" class="expert-box">
			<view class="expert">
				<view class="expert-item" v-for="(item,index) in expertList" :key="index" @click="cutExpert(index)">
					<view :class="item.show == true?'activity-item':''" class="expert-title">
						{{item.title}}
					</view>
					<view class="expert-text">
						{{item.text}}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <view class="expert-box">
			<view class="expert">
				<view class="expert-item">
					<view class="expert-title activity-item">
						达人列表
					</view>
					<view class="expert-text">
						帮你提前探店
					</view>
				</view>
			</view>
		</view> -->
		<view class="sex">
			<view :class="item.show == true?'activity-item':''" class="sex-item" v-for="(item,index) in sexList"
				:key="index" @click="cutSex(index)">
				<image v-if="item.img != ''" :src="item.img" mode=""></image>
				<view>
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="user">
			<view class="user-item" v-for="(item,index) in list" :key="index"
				@click="$navTo.togo('/pages/index/details/index',{id:item.id})">
				<view class="head-box">
					<view class="head">
						<view class="avatar-container" :style="{
					      backgroundImage: 'url(' + (item.avatar 
					        ? (item.avatar.startsWith('http') ? item.avatar : 'https://m.lqvvvv.com' + item.avatar)
					        : 'https://m.lqvvvv.com/assets/static/index/head.png') + ')'
					    }">
							<image class="avatar-frame" :src="'https://m.lqvvvv.com' + item.avatar_round"
								mode="aspectFit" style="width: 115%; height: 115%; top: -7.5%; left: -7.5%;"></image>
						</view>
					</view>
				</view>
				<view class="user-right">
					<view class="user-top">
						<view class="top-left">
							<view class="name">
								{{item.nickname}}
							</view>
							<image class="user-sex" v-if="item.gender == 2"
								src="https://m.lqvvvv.com/assets/static/index/female0.png" mode=""></image>
							<image class="user-sex" v-else src="https://m.lqvvvv.com/assets/static/index/maleb.png"
								mode=""></image>
							<image class="user-leve" v-if="item.level == 1"
								src="https://m.lqvvvv.com/assets/static/index/grade1.png" mode="">
							</image>
							<image class="user-leve" v-if="item.level == 2"
								src="https://m.lqvvvv.com/assets/static/index/grade2.png" mode="">
							</image>
							<image class="user-leve" v-if="item.level == 3"
								src="https://m.lqvvvv.com/assets/static/index/grade3.png" mode="">
							</image>
						</view>
						<view class="status" v-if="types == 1 || types == 3">
							<view class="dot"></view>
							<view>在线</view>
						</view>
						<view v-if="types == 2 || types == 3" @click.stop="goonline(item.id)">
							<u-button type="primary" color="linear-gradient(100deg, #83A2FF 0%, #FF9BC1 100%)"
								text="联系客服" size="mini" shape="circle"></u-button>
						</view>
					</view>
					<view class="hobby" v-if="isshow == 0">
						{{item.age||'20'}} / {{item.types||'唱歌 / 跳舞'}}
					</view>
					<view class="hobby" v-else>
						{{item.age||'20'}} / 线上唱歌，线上视频，线上聊天，线上语音
					</view>
					<view class="user-bottom">
						<view class="place">
							<image src="https://m.lqvvvv.com/assets/static/index/location.png" mode=""></image>
							<view class="place-text">
								距你{{item.distance}}km
							</view>
						</view>
						<view class="quantity">
							<image src="https://m.lqvvvv.com/assets/static/index/heart.png" mode=""></image>
							<view class="place-text">
								{{item.views}}次心动
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<!-- <view class="artificial">
			<image @click="NoOpen" src="https://m.lqvvvv.com/assets/static/business/artificial.png" mode=""></image>
		</view> -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <u-tabbar :value="0" :fixed="true" :placeholder="true" activeColor="#5755F2" inactiveColor="#2E314A"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" v-if="tabshow == 0" @click="gotaburl('首页')">
				<image style="width: 38rpx; height: 38rpx;" slot="active-icon" src="/static/tabbar/home1.png"></image>
				<image style="width: 38rpx; height: 38rpx;" slot="inactive-icon" src="/static/tabbar/home0.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="商家" @click="gotaburl('商家')">
				<image style="width: 38rpx; height: 38rpx;" slot="active-icon" src="/static/tabbar/business1.png">
				</image>
				<image style="width: 38rpx; height: 38rpx;" slot="inactive-icon" src="/static/tabbar/business0.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="消息" @click="gotaburl('消息')">
				<image style="width: 38rpx; height: 38rpx;" slot="active-icon" src="/static/tabbar/msg1.png"></image>
				<image style="width: 38rpx; height: 38rpx;" slot="inactive-icon" src="/static/tabbar/msg0.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="gotaburl('我的')">
				<image style="width: 38rpx; height: 38rpx;" slot="active-icon" src="/static/tabbar/my1.png"></image>
				<image style="width: 38rpx; height: 38rpx;" slot="inactive-icon" src="/static/tabbar/my0.png"></image>
			</u-tabbar-item>
		</u-tabbar> -->
		<!-- #endif -->
		<view class="rank">
			<image @click="goRank" src="https://m.lqvvvv.com/images/rank.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				search: '',
				status: 'loadmore',
				genderList: [{
						text: '男生',
						show: true,
						img: 'https://m.lqvvvv.com/assets/static/index/male1.png'
					},
					{
						text: '女生',
						show: false,
						img: 'https://m.lqvvvv.com/assets/static/index/female0.png'
					}
				],
				expertList: [{
					title: '空闲达人',
					text: '可直接下单预约',
					show: false
				}, {
					title: '预约达人',
					text: '请先联系客服',
					show: true
				}, {
					title: '官方达人',
					text: '立刻出发准时达',
					show: false
				}],
				qsnshow: false,
				sexList: [{
						text: '全部',
						img: '',
						gender: 0,
						show: true
					},
					{
						text: '男生',
						img: 'https://m.lqvvvv.com/assets/static/index/maleb.png',
						gender: 1,
						show: false
					},
					{
						text: '女生',
						img: 'https://m.lqvvvv.com/assets/static/index/female0.png',
						gender: 2,
						show: false
					},
					{
						text: '收藏',
						img: 'https://m.lqvvvv.com/images/Frame.png',
						gender: 3,
						show: false
					},
				],
				gender: 0,
				page: 1,
				types: 2,
				list: [],
				RecommendList: [],
				genderindex: 1,
				isshow: 0,

			}
		},
		async onLoad() {
			this.qsnshow = true
			let token = uni.getStorageSync("token") || '';
			if (token != '') {
				// 已登录
				// #ifdef MP-WEIXIN
				await this.getLocation();
				this.getList();
				// #endif
				// #ifdef APP
				this.getLocation();
				setTimeout(() => {
					this.getList();
				}, 2000)
				// #endif
				this.getRecommendList();
			} else {
				// #ifdef MP-WEIXIN
				await this.getLocation();
				this.getList();
				// #endif
				this.getRecommendList();
			}
		},
		async onShow() {
			this.showinfo()
			let token = uni.getStorageSync("token") || '';
			await this.getLocation();
			if (token != '') {
				this.updata()
			}
		},
		computed: {
			...mapState({
				location: state => state.location,
				city: state => state.city
			})
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			if (this.gender == 3) {
				this.getList2()
			} else {
				this.getList()
			}
		},
		methods: {
			...mapActions(['getLocation']),
			closepopup() {
				this.qsnshow = false
			},
			updata() {
				let app = this
				let params = {
					lat: this.location.latitude,
					lng: this.location.longitude,
				}
				app.$Request({
					method: 'POST',
					url: '/api/friend/updateLatLng',
					data: params,
					ismsg: false,
				}).then(res => {

				})
			},
			goonline() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfcb8f13051fb4e767f' //客服地址链接
					},
					corpId: 'ww3d05dfba76a348f3', //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
			},
			gotaburl(name) {
				if (name == '首页') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				if (name == '商家') {
					uni.switchTab({
						url: '/pages/business/index'
					})
				}
				if (name == '消息') {
					uni.switchTab({
						url: '/pages/message/index'
					})
				}
				if (name == '我的') {
					uni.switchTab({
						url: '/pages/my/index'
					})
				}
			},
			showinfo() {
				let params = {
					// #ifdef APP
					name: 'hide_status',
					// #endif
					// #ifdef MP-WEIXIN
					name: 'miniapp_hide_status'
					// #endif
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/getConfig',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.isshow = res.data
					}
				})
			},
			goTeenage() {
				let app = this
				app.$store.commit('setIsshow', false);
				uni.showModal({
					title: '提示',
					content: '是否开启青少年模式！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: '您已进入青少年模式！',
								icon: 'none'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
							app.$store.commit('setIsshow', true);
						}
					}
				});
			},
			gomate() {
				let token = uni.getStorageSync("token") || '';
				if (token != '') {
					uni.showLoading({
						title: '匹配中...',
						mask: true
					})
					this.$Request({
						method: 'POST',
						url: '/api/friend/getOneFriend',
						data: {
							gender: this.genderindex
						},
						ismsg: false,
					}).then(res => {
						if (res.code == 1) {
							setTimeout(() => {
								uni.hideLoading()
								this.$navTo.togo('/pages/index/details/index', {
									id: res.data.id
								})
							}, 1000)
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请登录！体验完整功能！',
						confirmText: '去登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.reLaunch({
									url: '/pages/login/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			getRecommendList() {
				let params = {
					page: 1,
					limit: 10,
					type: 'month'
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/scoreRankList',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.RecommendList = res.data.data
					}
				})
			},
			async getList() {
				const params = {
					lat: this.location.latitude,
					lng: this.location.longitude,
					gender: this.gender,
					type: this.types,
					page: this.page,
					city: this.city,
					limit: 10
				};
				console.log(params);

				const res = await this.$Request({
					method: 'POST',
					url: '/api/friend/getList',
					data: params,
					ismsg: false,
				});

				if (res.code === 1) {
					this.status = res.data.data.length < 10 ? 'nomore' : 'loading';

					// 更新列表数据
					this.list = this.page === 1 ? res.data.data : [...this.list, ...res.data.data];
				} else {
					uni.showToast({
						title: res.msg || '获取数据失败',
						icon: 'none'
					});
				}
			},
			async getList2() {
				const params = {
					lat: this.location.latitude,
					lng: this.location.longitude,
					page: this.page,
					city: this.city,
					limit: 10
				};
				console.log(params);

				const res = await this.$Request({
					method: 'POST',
					url: '/api/friend/getCollectList',
					data: params,
					ismsg: false,
				});

				if (res.code === 1) {
					this.status = res.data.data.length < 10 ? 'nomore' : 'loading';

					// 更新列表数据
					this.list = this.page === 1 ? res.data.data : [...this.list, ...res.data.data];
				} else {
					uni.showToast({
						title: res.msg || '获取数据失败',
						icon: 'none'
					});
				}
			},
			cutGender(index) {
				this.genderList.map(item => {
					item.show = false
				})
				this.genderList[index].show = true
				this.genderindex = index + 1
			},
			cutExpert(index) {
				this.expertList.map(item => {
					item.show = false
				})
				this.expertList[index].show = true
				this.types = index + 1
				this.page = 1
				this.getList()
			},
			cutSex(index) {
				if (index == 3) {
					this.sexList.map(item => {
						item.show = false
					})
					this.sexList[index].show = true
					this.gender = this.sexList[index].gender
					this.getList2()
				} else {
					this.sexList.map(item => {
						item.show = false
					})
					this.sexList[index].show = true
					this.gender = this.sexList[index].gender
					this.page = 1
					this.getList()
				}

			},
			NoOpen() {
				uni.showToast({
					icon: 'none',
					title: "暂未开放"
				})
			},
			goRank() {
				uni.navigateTo({
					url: '/pages/index/rank/index'
				})

			}
		}
	}
</script>
<style>
	.u-border {
		border: 1px solid #ffffff !important;
		/* 设置边框颜色为蓝色 */
	}

	page {
		background-color: #F7F8FC;
	}

	.scroll-view {
		white-space: nowrap;
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.pop-box {
		width: 480rpx;
		height: 580rpx;
		padding-top: 60%;
		border-radius: 20rpx 20px 20px 20px;
		text-align: center;
		background-image: url('https://m.lqvvvv.com/images/home-tbg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.info {
			width: 100%;
			padding: 1rem 0rem;

			.btn-box {
				width: 100%;
				display: flex;
				justify-content: center;

				.btn {
					width: 65%;
					background-color: #1DADFF;
					height: 2.6rem;
					line-height: 2.6rem;
					color: white;
					font-size: 0.8rem;
					border-radius: 2rem;
					padding: 0 18px;
				}
			}
		}

		.pop-img {
			width: 400rpx;
			height: 132px;
		}

		.text-1 {
			text-align: center;
			font-size: .8rem;
			margin-bottom: 6px;
		}

		.text-2 {
			text-align: center;
			font-size: .6rem;
			color: #8F939C;
			margin-bottom: 5px;
		}
	}

	.content {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 900rpx;
		padding: 60rpx 30rpx 30rpx 30rpx;

		.rank {
			position: fixed;
			top: 45%;
			right: 30rpx;

			image {
				width: 110rpx;
				height: 122rpx;
			}
		}

		.none {
			width: 100%;
			height: 100rpx;
			padding-left: 30rpx;
			margin-top: 20px;
			text-align: center;
			color: #333;
			font-size: 26rpx;
		}

		.artificial {
			position: fixed;
			right: 30rpx;
			bottom: 20%;

			image {
				width: 110rpx;
				height: 122rpx;
			}
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.location {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				.location-text {
					width: 120rpx;
					margin-right: 10rpx;
					color: #2E314A;
					font-size: 28rpx;
					font-weight: 700;
					padding: 20rpx 0;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					margin-left: 10rpx;
				}
			}

			.search {
				width: 100%;
				padding: 30rpx 0;
				position: relative;

				.overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: transparent;
					/* 或设置为rgba(0,0,0,0) */
					cursor: pointer;
					/* 添加手型光标 */
				}
			}
		}

		.tips {
			padding: 20rpx 0rpx 40rpx 0rpx;

			.tips-title {
				font-size: 50rpx;
				font-weight: bold;
				color: #000;
			}

			.tips-text {
				color: #2E314A;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}

		.matching {
			background-color: rgba(255, 255, 255, .4);
			padding: 30rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.matching-left {
				.matching-title {
					color: #2E314A;
					font-size: 28rpx;
					font-weight: bold;
				}

				.gender {
					display: flex;
					margin-top: 30rpx;

					.gender-item {
						display: flex;
						align-items: center;
						padding: 15rpx 30rpx;
						border-radius: 30rpx;
						background-color: #4983F2;
						color: #fff;
						margin-right: 20rpx;
						font-size: 24rpx;

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 15rpx;
						}
					}

					.activity-item {
						background-color: #FFE0EC;
						color: #F24789;
					}
				}
			}

			.start-btn {
				background-color: #B76CF7;
				padding: 15rpx 30rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}

		.recommend {
			padding: 30rpx;
			margin-top: 30rpx;
			background-image: url('https://m.lqvvvv.com/assets/static/index/recommend.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.recommend-title {
				color: #2A296F;
				font-size: 36rpx;
				font-weight: bold;
				padding: 0 20rpx;
			}

			.item-box {
				display: flex;
				margin-top: 40rpx;

				.recommend-item {
					margin-right: 20rpx;

					.head-box {
						padding: 5rpx;
						border-radius: 20rpx;
						position: relative;

						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
						}

						.state {
							position: absolute;
							top: 12rpx;
							right: 12rpx;
							display: flex;
							align-items: center;
							padding: 2rpx 10rpx;
							border-radius: 10rpx;
							border: 1rpx solid #fff;

							image {
								width: 16rpx;
								height: 16rpx;
							}

							.state-text {
								color: #fff;
								font-size: 20rpx;
								margin-left: 10rpx;
							}
						}
					}

					.item-text {
						margin-top: 20rpx;
						text-align: center;
						color: #626479;
						font-size: 24rpx;
					}
				}
			}
		}

		.expert-box {
			margin-top: 20rpx;
			overflow-x: auto; // 允许横向滚动

			.expert {
				display: flex;
				align-items: center;

				.expert-item {
					width: 33%;
					text-align: center;

					.expert-title {
						color: #2E314A;
						font-size: 32rpx;
					}

					.expert-text {
						margin-top: 10rpx;
						color: #9799AC;
						font-size: 22rpx;
					}

					.activity-item {
						color: #5755F2;
					}
				}
			}
		}


		.sex {
			width: 90%;
			padding: 10rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: space-between;
			background: linear-gradient(180deg, rgba(163, 162, 255, 0.27) 0%, rgba(163, 162, 255, 0.11) 100%);
			margin: 0 auto;
			margin-top: 30rpx;

			.sex-item {
				width: 22%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10px 0;
				font-size: 26rpx;

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}

			.activity-item {
				background-color: #fff;
				border-radius: 40rpx;
			}
		}

		.user {
			.user-item {
				background-color: #fff;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.head-box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 190rpx;
					height: 190rpx;

					.head {
						/* 外层容器尺寸根据实际情况调整 */
						width: 120rpx;
						height: 120rpx;
					}

					.avatar-container {
					  position: relative;
					  width: 120rpx;
					  height: 120rpx;
					  background-repeat: no-repeat;
					  background-size: 100% 100%;
					  /* 关键：移除裁剪 */
					  overflow: visible;
					  border-radius: 50%; /* 如果需要圆形 */
					}
					
					.avatar-frame {
					  position: absolute;
					  z-index: 2;
					  pointer-events: none;
					}

				}

				.user-right {
					width: 70%;

					.user-top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.top-left {
							display: flex;
							align-items: center;

							.name {
								font-size: 28rpx;
								color: #2E314A;
								margin-right: 10rpx;
							}

							.user-sex {
								margin-right: 10rpx;
								width: 24rpx;
								height: 24rpx;
							}

							.user-leve {
								width: 111rpx;
								height: 63rpx;
							}
						}

						.status {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #1AC97F;

							.dot {
								width: 12rpx;
								height: 12rpx;
								border-radius: 50%;
								background-color: #1AC97F;
								margin-right: 10rpx;
							}
						}
					}

					.hobby {
						color: #9799AC;
						font-size: 24rpx;
						margin-top: 10rpx;
					}

					.user-bottom {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						margin-top: 10rpx;

						.place {
							color: #8B8DA0;
							display: flex;
							align-items: center;

							image {
								margin-right: 5rpx;
								width: 20rpx;
								height: 20rpx;
							}
						}

						.quantity {
							color: #B76CF7;
							display: flex;
							align-items: center;

							image {
								width: 27.79rpx;
								height: 26.45rpx;
								margin-right: 5rpx;
							}
						}
					}
				}
			}
		}
	}
</style>